<template>
  <div class="app-container" style="margin-left: 20px">
    <div class="filter-container">
      <el-row style="margin-top: 20px">
        <el-button type="primary" @click="addNode">添加</el-button>
      </el-row>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" width="70px" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="ID" width="50px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="节点名称" width="180px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.node_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="节点IP" width="140px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.ipv4 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="节点端口" width="140px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.ipv4_port }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回调IP" width="140px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.callback_ip4 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回调端口" width="140px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.callback_ipv4_port }}</span>
        </template>
      </el-table-column>
      <el-table-column label="系统" width="140px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.system }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.create_time | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="用例类型" width="200px" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.case_type == 1" effect="plain" :type="'success'" disable-transitions>WEB_UI</el-tag>
          <el-tag v-else-if="scope.row.case_type == 2" effect="plain" :type="'info'">APP_UI</el-tag>
          <el-tag v-else-if="scope.row.case_type == 3" effect="plain" :type="'danger'">API</el-tag>
          <el-tag v-else style="margin-left: 10px">接口自动化</span>
        </template>
      </el-table-column>-->
      <el-table-column label="更新时间" width="150px" align="center">
        <template slot-scope="{ row }">
          <span> {{ row.update_time | parseTime("{y}-{m}-{d} {h}:{i}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="110px" align="center">
        <template slot-scope="{ row }">
          <span :class="[row.status === 'offline' ? 'danger' : 'success']">{{
            row.status
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width=""
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="tableRowTest(row)">
            Test
          </el-button>
          <el-button type="primary" size="mini" @click="tableRowEdit(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="tableRowDelTask(row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page_num"
      :limit.sync="listQuery.page_per"
      @pagination="getList"
    />
    <mini
      v-if="dialogAdd.show"
      ref="popBox"
      :edit="edit"
      :size-forms="sizeForms"
      destroy-on-close="true"
      :title="edit ? '编辑' : '添加'"
      @closePop="closePop"
    />
  </div>
</template>
<script>
import { Message } from 'element-ui'
import mini from './components/edit'
import { node_list, delete_node, connect_status } from '@/api/node'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ComplexTable',
  components: {
    Pagination,
    mini
  },
  data() {
    return {
      dialogAdd: {
        show: false
      },
      tableKey: 0,
      list: null,
      total: 0,
      edit: false,
      listLoading: true,
      listQuery: {
        page_num: 1,
        page_per: 10
      },
      showReviewer: true,
      sizeForms: {},
      status: 'offline'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    closePop(formName) {
      this.dialogAdd.show = false
      this.sizeForms = {
        case_name: '',
        group_name: '',
        project_name: '',
        case_type: '',
        case_value: ''
      }
    },
    getList() {
      this.listLoading = true
      node_list(this.listQuery).then((response) => {
        this.list = response.data.items
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },
    handleFilter(groudId) {
      this.listQuery.page_num = 1
      this.listQuery.page_per = 10
      this.getList()
    },
    addNode() {
      this.dialogAdd.show = true
      this.edit = false
    },
    tableRowEdit(row) {
      this.edit = true
      this.sizeForms = row
      this.dialogAdd.show = true
    },
    tableRowTest(row, a) {
      connect_status(row.id).then((res) => {
        const domIndex =
          document
            .getElementsByClassName('current-row')[0]
            .getElementsByTagName('td')[0].innerText - 1
        this.list[domIndex].status = res.data.status
        Message.success(res.message)
      })
    },
    tableRowDelTask(id) {
      if (confirm('确定要删除吗') !== true) {
        return this.$message.info('已取消删除!')
      } else {
        this.listLoading = true
        delete_node(id).then((res) => {
          this.listLoading = false
          if (res.code === 20000) {
            this.getList()
            Message.success(res.message)
          } else {
            Message.error(res.message)
          }
        })
      }
    }
  }
}
</script>
<style scoped>
.danger {
  color: red;
}
.success {
  color: #95f204;
}
</style>
